import React, { useEffect } from "react";
import styles from "./Index.module.css";
import { Swiper, Tabs } from "antd-mobile";
import { CalendarOutline } from "antd-mobile-icons";
import { useNavigate } from "react-router-dom";
import Myfooter from "../../components/Myfoooter/Index";
function Index() {
  const nav = useNavigate();

  return (
    <div className={styles.hz}>
      
      <div className={styles.title}>
        <h2 style={{ marginTop: "10px", marginLeft: "10px" }}>智慧医院平台</h2>
      </div>

      <div className={styles.lun}>
        <Swiper loop autoplay>
          <Swiper.Item>
            <img src="./lunnn2.png" alt="" />
          </Swiper.Item>
          <Swiper.Item>
            <img src="./lunnn2.png" alt="" />
          </Swiper.Item>
        </Swiper>
      </div>

      <div className={styles.liangf}>
        <div className={styles.fang1} onClick={() => nav("/yuyue")}>
          <div>
            <CalendarOutline
              style={{
                fontSize: "40px",
                marginTop: "20px",
                color: "white",
                marginLeft: "10px",
              }}
            />
          </div>
          <div>
            <div
              style={{
                marginTop: "16px",
                color: "white",
                fontSize: "20px",
                marginLeft: "10px",
              }}
            >
              门诊挂号
            </div>
            <div
              style={{ marginTop: "10px", color: "white", marginLeft: "10px" }}
            >
              便捷预约挂号
            </div>
          </div>
        </div>

        <div className={styles.fang2}>
          <div>
            <img
              src="./hongqian.png"
              alt=""
              style={{
                fontSize: "40px",
                marginTop: "20px",
                color: "white",
                marginLeft: "10px",
              }}
            />
          </div>

          <div>
            <div
              style={{
                marginTop: "16px",
                color: "white",
                fontSize: "20px",
                marginLeft: "10px",
              }}
            >
              门诊缴费
            </div>
            <div
              style={{ marginTop: "10px", color: "white", marginLeft: "10px" }}
              onClick={() => nav("/jiao")}
            >
              便捷预约挂号
            </div>
          </div>
        </div>
      </div>

      <div className={styles.dong}>
        <div className={styles.gong}>公告</div>
        <div style={{ marginTop: "5px" }}>|</div>
        <div style={{ marginTop: "5px" }}>
          智慧医院即将上线通知
          <span style={{ marginLeft: "100px" }}>{">"}</span>
        </div>
      </div>

      <div className={styles.tab}>
        <Tabs className={styles.xtab}>
          <Tabs.Tab title="门诊" key="fruits">
            <div className={styles.gong}>
              <dl onClick={()=>nav('/menbao')}>
                <ul>
                  <img src="" alt="" />
                </ul>
                <li>门诊报告</li>
              </dl>

              <dl onClick={()=>nav('/houzhen')}>
                <ul>
                  <img src="" alt="" />
                </ul>
                <li>候诊查询</li>
              </dl>

              <dl>
                <ul>
                  <img src="" alt="" />
                </ul>
                <li>自助开单</li>
              </dl>

              <dl>
                <ul>
                  <img src="" alt="" />
                </ul>
                <li>医技预约</li>
              </dl>

              <dl>
                <ul>
                  <img src="" alt="" />
                </ul>
                <li>我的复诊</li>
              </dl>

              <dl>
                <ul>
                  <img src="" alt="" />
                </ul>
                <li>自助取号</li>
              </dl>

              <dl>
                <ul>
                  <img src="" alt="" />
                </ul>
                <li>门诊导诊单</li>
              </dl>

              <dl>
                <ul>
                  <img src="" alt="" />
                </ul>
                <li>电子票据</li>
              </dl>
            </div>
          </Tabs.Tab>

          <Tabs.Tab title="住院" key="vegetables">
            <div className={styles.gong}>
              <dl>
                <ul>
                  <img src="" alt="" />
                </ul>
                <li>入院登记</li>
              </dl>

              <dl>
                <ul>
                  <img src="" alt="" />
                </ul>
                <li>住院预交</li>
              </dl>

              <dl>
                <ul>
                  <img src="" alt="" />
                </ul>
                <li>住院报告</li>
              </dl>

              <dl>
                <ul>
                  <img src="" alt="" />
                </ul>
                <li>住院日清单</li>
              </dl>

              <dl>
                <ul>
                  <img src="" alt="" />
                </ul>
                <li>住院陪护证</li>
              </dl>
            </div>
          </Tabs.Tab>

          <Tabs.Tab title="综合" key="animals">
            <div className={styles.gong}>
              <dl>
                <ul>
                  <img src="" alt="" />
                </ul>
                <li>代寄服务</li>
              </dl>

              <dl>
                <ul>
                  <img src="" alt="" />
                </ul>
                <li>中药代煎</li>
              </dl>

              <dl>
                <ul>
                  <img src="" alt="" />
                </ul>
                <li>价目查询</li>
              </dl>

              <dl>
                <ul>
                  <img src="" alt="" />
                </ul>
                <li>就医指南</li>
              </dl>

              <dl>
                <ul>
                  <img src="" alt="" />
                </ul>
                <li>满意度调查</li>
              </dl>

              <dl>
                <ul>
                  <img src="" alt="" />
                </ul>
                <li>楼层分布</li>
              </dl>
            </div>
          </Tabs.Tab>
        </Tabs>
      </div>

      <div className={styles.jian}>
        <h2>
          健康咨询
          <span
            style={{ marginLeft: "260px", color: "gray", fontSize: "14px" }}
            onClick={() => nav("/more")}
          >
            更多
          </span>
        </h2>

        <div className={styles.list}>

          <div className={styles.list1}>
            <div>

              <div>
                <h3 style={{ marginLeft: "10px" ,marginTop:'10px'}}>
                  世界糖尿病日,应该注意什么
                  <br />
                  来调节?
                </h3>
              </div>

              <div style={{color:'blue',marginLeft:'10px',marginTop:'20px'}}>#健康养生</div>

            </div>

            <div>

                <div>
                  <img src="" alt="" />
                </div>

                <div className={styles.zan}>
                  <img src="./zann.png" alt="" />
                  <span className={styles.zan1}>520</span>
                  <img style={{marginLeft:'10px'}} src="./yan.png" alt="" />
                  <span style={{fontSize:"20px",color:'gray'}}>2000</span>
                </div>
               
              
            </div>

              
          </div>

             <div className={styles.list1}>
            <div>

              <div>
                <h3 style={{ marginLeft: "10px" ,marginTop:'10px'}}>
                  世界糖尿病日,应该注意什么
                  <br />
                  来调节?
                </h3>
              </div>

              <div style={{color:'blue',marginLeft:'10px',marginTop:'20px'}}>#健康养生</div>

            </div>

            <div>

                <div>
                  <img src="" alt="" />
                </div>

                <div className={styles.zan}>
                  <img src="./zann.png" alt="" />
                  <span className={styles.zan1}>520</span>
                  <img style={{marginLeft:'10px'}} src="./yan.png" alt="" />
                  <span style={{fontSize:"20px",color:'gray'}}>2000</span>
                </div>
               
              
            </div>

              
          </div>


        </div>
      </div>

      <div className={styles.yuan}>
        <div style={{marginLeft:'12px',paddingTop:'28px',color:'white'}}>
           智能客服
        </div>
       
      </div>

      <div>
        {/* <Myfooter /> */}
      </div>
    </div>
  );
}

export default Index;
